<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的资料</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,
			minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			* {
				box-sizing: border-box;
			}
			
			html,
			body {
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			#container {
				width: 980px;
				margin: 0 auto;
				background-color: white;
			}
			
			#container #title {
				width: 100%;
				height: 8vh;
				text-align: center;
				line-height: 8vh;
				font-size: 21px;
				color: red;
				box-shadow: 0 5px 5px #F2F2F2;
			}
			
			.img {
				margin-top: 2vh;
				width: 100%;
				height: 32vh;
				box-shadow: 0 5px 5px #F2F2F2;
				text-align: center;
			}
			
			.img img {
				width: 80px;
				height: 80px;
				display: block;
				margin: 0 auto;
				margin-top: 5%;
				border-radius: 50%;
			}
			
			.img small {
				color: #666666;
			}
			
			#choice {
				width: 98%;
				box-shadow: 5px 5px 5px #F0F0F0;
				margin: 1rem auto;
			}
			
			#first {
				width: 100%;
				height: 6vh;
				border: 1px solid #F2F2F2;
				line-height: 6vh;
			}
			
			#first img:nth-child(1) {
				width: 16px;
				margin-left: 2%;
			}
			
			#first span {
				margin-left: 0.5%;
			}
			
			#first img:nth-of-type(2) {
				width: 10px;
				border-radius: 50%;
				float: right;
				margin-top: 1%;
				margin-right: 2%;
			}
			
			#iphone img {
				width: 60px;
				float: right;
				margin-right: 2%;
			}
			
			.footer {
				position: fixed;
				bottom: 0;
				width: 980px;
			}
			
			.footer ul {
				width: 100%;
				height: 10vh;
				margin: 0 auto;
				padding: 0;
				border: 1px solid #F2F2F2;
			}
			
			.footer ul li {
				float: left;
				width: 25%;
				list-style: none;
				text-align: center;
				margin-top: 0.3rem;
			}
			
			.footer ul li:nth-child(1) {
				margin-top: 0.7rem;
			}
			
			.footer ul li a {
				color: grey;
				text-decoration: none;
			}
			
			.footer ul li a img {
				display: block;
				width: 42px;
				margin: 0.1rem auto;
			}
			
			@media screen and (max-width: 480px) {
				#container {
					width: 100%;
				}
				.img {
					height: 28vh;
				}
				.img img {
					margin-top: 10%;
				}
				.footer {
					width: 100%;
				}
				.footer ul li {
					float: left;
					width: 25%;
					list-style: none;
					text-align: center;
					margin-top: 1rem;
				}
				.footer ul li a img {
					width: 25%;
				}
				.footer ul li:nth-child(1) {
					margin-top: 1rem;
				}
			}
		</style>
	</head>

	<body>
		<div id="grade">
			<div id="container">
				<div id="title">
					<span>我的</span>
				</div>
				<div class="img">
					<a href="个人信息.html"><img src="ios/16.jpg" /></a>
					<h3>李青</h3>
					<small>文能提笔安天下,武能上马定乾坤</small>
				</div>
				<div id="choice">
					<div id="first">
						<img src="ios/porfile_icon_gerenzhongxin_nor.png@2x.png" />
						<span>个人信息</span>
						<img src="ios/list_btn_link_nor.png@2x.png" />
					</div>
					<div id="first">
						<img src="ios/porlife_icon_wodeliuyan_nor.png@2x.png" />
						<span>我的留言</span>
						<img src="ios/list_btn_link_nor.png@2x.png" />
					</div>
					<div id="first">
						<img src="ios/porlife_icon_wodeshoucang_nor.png@2x.png" />
						<span>我的收藏</span>
						<img src="ios/list_btn_link_nor.png@2x.png" />
					</div>
					<div id="first">
						<img src="ios/porlife_icon_wodexiaoxi_nor.png@2x.png" />
						<span>我的消息</span>
						<img src="ios/list_btn_link_nor.png@2x.png" />
					</div>
					<div id="first">
						<img src="ios/porlife_icon_set_nor.png@2x.png" />
						<span>设置</span>
						<img src="ios/list_btn_link_nor.png@2x.png" />
					</div>

				</div>
				<div id="iphone">
					<img src="ios/icon_btn_dianhua_nor.png@2x.png" />
				</div>
				<div class="footer">
					<ul>
						<li>
							<a href="#">
								<img src="ios/icon_nav_zhuye_pink_@2x.png" /> 首页
							</a>
						</li>
						<li>
							<a href="#">
								<img src="ios/icon_nav_tuku_gray_nor.png@2x.png" /> 图库
							</a>
						</li>
						<li>
							<a href="#">
								<img src="ios/icon_nav_kecheng_gray_nor.png@2x.png" /> 课程
							</a>
						</li>
						<li>
							<a href="#">
								<img src="ios/icon_nav_wode_gary_nor.png@2x.png" /> 我的
							</a>
						</li>
					</ul>
				</div>

			</div>

		</div>
	</body>

</html>